<template>
    <!-- 表单对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <template v-for="(f,i) in formFields" :key="i">
        <el-form-item :label="f.name" :prop="f.code">
          <el-input v-model="form[f.code]" :placeholder="'请输入'+f.name"/>
        </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup name="ModelForm">
import { getModelData, addModelData, updateModelData } from "@/api/dev/modelData";

const { proxy } = getCurrentInstance();

const props = defineProps({
  fieldList: {
    type: Array
  },  
  dsOptions: {
    type: Object
  },
  formData: {
    type: Object
  }
});

const emit = defineEmits(['submit', 'close'])

const open = ref(false);
const title = ref("");

const form = ref({});
const rules = ref({});
const formFields = ref([]);

watch(() => props.formData, val => {  
  if(val == null){
      open.value = false;
      formFields.value = [];
  }else if(val.formAction == 'add'){
      open.value = true;
      initFields();
  }else if(val.formAction == 'edit'){
      open.value = true;   
      initFields();   
  }else if(val.formAction == 'view'){
      open.value = true;
      initFields();
  }else{
    open.value = false;
    formFields.value = [];
  }
  title.value = val.formTitle;
},{ deep: true, immediate: true });


/** 解析字段 */
function initFields() {
  if(props.fieldList == null || props.fieldList.length == 0){
    return;
  }
  let fields = [];
  let modelForm = {};
  for(let i=0;i<props.fieldList.length;i++){
      let field = props.fieldList[i];
      if(field.dataType == 'view'){
        continue;
      }
      modelForm[field.code] = null;
      if(field.required == 'Y'){
        rules.value[field.code] = [{ required: true, message: field.name+"不能为空", trigger: "blur" }];
      }
      fields.push(field);
    }
    formFields.value = fields;
    form.value = modelForm;
    proxy.resetForm("formRef");
    if(props.formData.formId){
      getModelData(props.formData.formModel, props.formData.formId).then(response=>{
        form.value = response.data;
      })
    }
}

// 取消按钮
function cancel() {
  open.value = false;
  form.value = {};
  proxy.resetForm("formRef");
   emit('close');
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateModelData(props.formData.formModel, form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
            emit('submit');
        });
      } else {
        addModelData(props.formData.formModel, form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
            emit('submit');
        });
      }
    }
  });
}

</script>
